<template>
	<div>
		<a-layout>
			<a-layout-header class="header">
				<div class="flex left-slide" :class="{ bd: open }">
					<div @click="() => (collapsed = !collapsed)" class="trigger"><a-icon :type="collapsed ? 'menu' : 'close'" /></div>
					<div class="logo flex-1">
						<router-link :to="{ name: 'Home' }">果芽管理平台</router-link>
					</div>
					<div class="menu" @click="open = !open"><a-icon type="ellipsis" /></div>
				</div>
				<a-row type="flex" justify="end">
					<!-- <a href="javascript:;" class="profile flex flex-align-center">
						<a-icon type="setting" />
						Profile
					</a> -->
					<a href="javascript:;" class="exit flex flex-align-center" @click="handleLogout">
						<a-icon type="logout" />
						Logout
					</a>
				</a-row>
			</a-layout-header>
		</a-layout>
		<div class="iframebox flex" :class="{ open: open }">
			<sider-menu :collapsed="collapsed" :menus="subMenu"></sider-menu>
			<div class="flex-1"><route-view></route-view></div>
		</div>
	</div>
</template>

<script>
import SiderMenu from '@/components/menu/SiderMenu';
import RouteView from '@/layouts/RouteView';
import { mapGetters, mapActions, mapState } from 'vuex';
import { asyncRouterMap } from '@/router';
export default {
	name: 'PageView',
	components: {
		SiderMenu,
		RouteView
	},
	computed: {
		key() {
			// return this.$route.path+Math.random()
			return this.$route.path;
		}
	},
	data() {
		return {
			title: '',
			selectkey: [],
			menuMode: 'inline',
			collapsed: this.collapsed,
			subMenu: [],
			open: false
		};
	},
	computed: {
		...mapState({
			// 动态主路由
			mainMenu: state => state.addRouters,
			role: state => state.role
		})
	},
	created() {
		/* 获取路由 */
		// let mainMenu = this.mainMenu.find(item => item.name == 'home');
		this.subMenu = asyncRouterMap;
		this.getUserInfo()
	},
	mounted() {
		document.body.classList.remove('userLayout');
	},
	methods: {
		handleLogout() {
			let that = this;
			this.$confirm({
				title: '你确定要退出登录吗?',
				// content: '你确定要退出吗？',
				okType: 'danger',
				onOk() {
					that.$store.dispatch('Logout').then(() => {
						that.$router.push({ path: '/user/login' });
						// window.location.reload();
					});
				},
				onCancel() {
					console.log('Cancel');
				}
			});
		},
		getUserInfo(){
			this.$getAction(this.$api.getUserInfo).then(da=>{
				console.log('haha')
			})
		}
	}
};
</script>
<style type="text/css">
html,
body {
	overflow: hidden;
}
</style>
<style scoped="scoped" lang="less">
// @import '~ant-design-vue/dist/antd.less';
.ant-layout-header {
	background: #000;
	padding: 0;
	color: #fff;
	height: 66px;
	line-height: 66px;
	& > div {
		height: 66px;
		background: #000;
	}
	.trigger {
		font-size: 18px;
		margin-left: 15px;
		padding: 0 15px;
	}
	.bd {
		border-bottom: 1px solid #fff;
	}
	.menu {
		font-size: 18px;
		margin-right: 15px;
		padding: 0 15px;
	}
	.logo {
		font-size: 16px;
		padding: 0 20px;
		a {
			color: #fff;
			text-decoration: none;
			display: block;
			margin: 0 auto;
			text-align: center;
		}

		img {
			max-width: 200px;
			width: 100%;
		}
	}

	.avatar {
		width: 22px;
		height: 22px;
		overflow: hidden;
		border-radius: 100%;
		margin-left: 20px;
		cursor: pointer;

		img {
			height: 100%;
			width: 100%;
			display: block;
			position: relative;

			&:after {
				content: '';
				display: inline-block;
				position: absolute;
				z-index: 2;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				// background-image: url(../../../assets/img/thumb.png);
				background-size: cover;
				background-color: none;
			}
		}
	}

	.exit,
	.profile {
		cursor: pointer;
		color: #fff;
		padding: 0 15px;
		&:hover {
			background-color: rgba(243, 247, 249, 0.3);
		}
	}

	.exit i,
	.profile i {
		font-size: 14px;
		margin-right: 5px;
		color: #fff;
	}
	@media (min-width: 768px) {
		display: flex;
		justify-content: space-between;
		.left-slide {
			width: 260px;
		}
		.trigger,
		.menu {
			display: none;
		}
		// .exit,
		// .profile {
		// 	display: block;
		// }
	}
}

.iframebox {
	position: absolute;
	top: 66px;
	left: 0;
	right: 0;
	bottom: 0;
	box-sizing: border-box;
	background: #f1f4f5;
	transition: all 0.3s;
	&.open {
		top: 132px;
	}
	@media (min-width: 768px) {
		top: 66px;
	}
}

.iframebox > div {
	height: 100%;
	width: 100%;
	overflow: auto;
}

.iframebox > div iframe {
	border: none;
	height: 100%;
	width: 100%;
	overflow: auto;
}
.site-footer {
	line-height: 44px;
	background: #252a2b;
	color: #76838f;
	padding: 0 30px;
	font-size: 14px;
	a {
		color: #76838f;
	}
}
/deep/ .ant-spin-container {
	height: 100%;
}
</style>
